import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { getArticleCollect, getCollectList } from './service';
import { Avatar, Popover, Tag } from 'antd';
import { Link, useHistory } from 'umi';
import IconFont from '@/components/Icon';
import { GithubOutlined } from '@ant-design/icons';
import Count from '../Count';
import CountArticle from './count';

interface Props {}

const YouPraise: FC<Props> = () => {
  const [article, setArticle] = useState([]);
  const history = useHistory();
  const getArticle = () => {
    // getArticleCollect({ operateuser_id: localStorage.getItem('user_id') }).then(res => {
    //   setArticle(res.data);
    // });
    getCollectList({ operateuser_id: localStorage.getItem('user_id') }).then(res => {
      setArticle(res.data);
    });
  };
  const goToDetail = (id: number, user_id: string) => {
    history.push(`/client/detail/${id}`, { id, user_id });
  };
  useEffect(() => {
    getArticle();
  }, []);
  return (
    <div className={style.container}>
      {article.map((item, index) => (
        <div
          className={style.card}
          onClick={() => {
            goToDetail(item.id, item.user_id);
          }}
        >
          <div className={style.top}>
            <Popover
              content={(
                <div>
                  <div>
                    <Avatar
                      src={
                        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200'
                      }
                      className={style.photo}
                      size="large"
                      shape="circle"
                    />
                    <Tag icon={<GithubOutlined />} color="#55acee" style={{ marginLeft: '10px' }}>
                      {item.username}
                    </Tag>
                  </div>
                  <Count />
                </div>
              )}
              title="详细信息"
            >
              <Link to={''} style={{ color: '#707070' }}>
                {item?.username}
              </Link>
            </Popover>
            {` | ${item.createdAt.split(' ')[0]} | ${item.type}`}
          </div>

          <div className={style.middle}>
            <div className={style.title}> {item.title}</div>
            <div>{item.desc.slice(0, 40)}</div>
          </div>

          <div className={style.bottom}>
            <CountArticle id={item.id} />
          </div>
        </div>
      ))}
    </div>
  );
};

export default YouPraise;
